<template>
  <div>
    <el-collapse>
      <el-collapse-item title="条件搜索" style="margin-left: 16px">

        <el-form :inline="true" :model="sizeForm" label-width="90px" size="mini">
          <el-form-item label="推广位绑定">
            <el-select v-model="sizeForm.promote" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
              <el-option label="已绑定" value="2"></el-option>
              <el-option label="未绑定" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="账号类型">
            <el-select v-model="sizeForm.account" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
              <el-option label="电商/企业号" value="2"></el-option>
              <el-option label="普通账号" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="封禁状态">
            <el-select v-model="sizeForm.ban" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
              <el-option label="未封禁" value="2"></el-option>
              <el-option label="已封禁" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="抖音授权">
            <el-select v-model="sizeForm.douyin" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
              <el-option label="授权成功" value="2"></el-option>
              <el-option label="授权过期" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="百应授权">
            <el-select v-model="sizeForm.baiying" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
              <el-option label="未授权" value="2"></el-option>
              <el-option label="已授权" value="3"></el-option>
              <el-option label="已过期" value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标签">
            <el-select v-model="sizeForm.tag" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="Dou+监控">
            <el-select v-model="sizeForm.dou" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
              <el-option label="已监控" value="2"></el-option>
              <el-option label="未监控" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="小店订单">
            <el-select v-model="sizeForm.order" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
              <el-option label="已开启" value="2"></el-option>
              <el-option label="未开启" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="直播监控">
            <el-select v-model="sizeForm.live" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
              <el-option label="已监控" value="2"></el-option>
              <el-option label="未监控" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <el-card shadow="always" style="margin-top: 10px">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="douyin">抖音号</el-button>
      <el-button size="small">标签管理</el-button>
      <el-dropdown style="margin-left: 10px">
        <el-button size="small">
          更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :disabled="isDisabled">编辑运营人</el-dropdown-item>
          <el-dropdown-item :disabled="isDisabled">编辑标签</el-dropdown-item>
          <el-dropdown-item :disabled="isDisabled">编辑Dou+监控</el-dropdown-item>
          <el-dropdown-item :disabled="isDisabled">删除抖音号</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-card>

    <el-card shadow="always" style="margin-top: 10px">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        max-height="500"
        fit border>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          fixed="left"
          label="编号"
          align="center"
          width="50"
          type="index">
        </el-table-column>
        <el-table-column
          prop="date"
          label="抖音号名称"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          :render-header="douyinAuth"
          prop="name"
          label="抖音授权"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          :render-header="baiyingAuth"
          prop="province"
          label="百应授权"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          :render-header="dou"
          label="Dou+监控"
          align="center"
          width="120">
          <template slot-scope="scope">
            <!--v-model="scope.row.dou_monitoring"-->
            <el-switch
              v-model="scope.row.dou"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="100"
              inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          :render-header="shopOrder"
          label="小店订单"
          align="center"
          width="120">
          <template slot-scope="scope">
            <!--v-model="scope.row.shop_order"-->
            <el-switch
              v-model="scope.row.order"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="100"
              inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          :render-header="live"
          label="直播账号"
          align="center"
          width="120">
          <template slot-scope="scope">
            <!--v-model="scope.row.live_account"-->
            <el-switch
              v-model="scope.row.live"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="100"
              inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="zip"
          label="标签"
          align="center"
          width="120">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-plus" size=""></el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="zip"
          label="备注"
          align="center"
          width="120">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-plus" size=""></el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="zip"
          label="余额"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="粉丝数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="更新时间"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="简介"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="抖音号ID"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="抖音UID"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="账号类型"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="推广位ID"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="企业认证"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="机构认证"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="抖音音乐人认证"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="抖音特效师认证"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="作品数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="关注数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="获赞总数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="创建时间"
          align="center"
          width="120">
        </el-table-column>

        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="120">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              trigger="hover">
              <el-button style="padding-left: 30px" size="medium" type="text">更新</el-button>
              <el-button type="text" size="medium">删除</el-button>
              <el-button
                slot="reference"
                type="text"
                size="small"
                icon="el-icon-more">
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <el-dialog title="卡片显示设置" align="center" :visible.sync="settingDialog">
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="抖音号名称"></el-checkbox>
        <el-checkbox label="抖音授权"></el-checkbox>
        <el-checkbox label="百应授权"></el-checkbox>
        <el-checkbox label="Dou+监控"></el-checkbox>
        <el-checkbox label="小店订单"></el-checkbox>
        <el-checkbox label="直播账号"></el-checkbox>
        <el-checkbox label="标签"></el-checkbox>
        <el-checkbox label="备注"></el-checkbox>
        <el-checkbox label="余额"></el-checkbox>
        <el-checkbox label="粉丝数"></el-checkbox>
        <el-checkbox label="更新时间"></el-checkbox>
        <el-checkbox label="简介"></el-checkbox>
        <el-checkbox label="抖音号ID"></el-checkbox>
        <el-checkbox label="抖音UID"></el-checkbox>
        <el-checkbox label="账号类型"></el-checkbox>
        <el-checkbox label="推广位ID"></el-checkbox>
        <el-checkbox label="企业认证"></el-checkbox>
        <el-checkbox label="机构认证"></el-checkbox>
        <el-checkbox label="抖音音乐人认证"></el-checkbox>
        <el-checkbox label="抖音特效师认证"></el-checkbox>
        <el-checkbox label="作品数"></el-checkbox>
        <el-checkbox label="关注数"></el-checkbox>
        <el-checkbox label="获赞总数"></el-checkbox>
        <el-checkbox label="创建时间"></el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="button">确定</el-button>
        <el-button @click="settingDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {douyinOauth} from "@/api/work/douyinOuath";
  export default{
    data(){
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        show: false,
        settingDialog: false,
        isDisabled: true,
        checkList: [],
        sizeForm: {},
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          live: 100,
          order: 100,
          dou: 100,
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          live: 100,
          order: 100,
          dou: 100,
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          live: 100,
          order: 100,
          dou: 100,
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          live: 100,
          order: 100,
          dou: 100,
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          live: 100,
          order: 100,
          dou: 100,
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          live: 100,
          order: 100,
          dou: 100,
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          live: 100,
          order: 100,
          dou: 100,
          zip: 200333
        }]
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleSelectionChange(val){
        console.log(val)
        if (val.length > 0) {
          this.isDisabled = false
        } else {
          this.isDisabled = true
        }
      },
      handleRowClick(row, column, event){
        console.log(row)
        console.log(column)
        console.log(event)
      },
      handleSetting(){
        this.settingDialog = true;
      },
      button(){
        console.log(this.checkList)
      },
      douyin(){
        douyinOauth().then(response => {
          console.log("授权", response)
          window.location.href = response.data
        });
      },

      douyinAuth(h, {column}){
        const inReview = '授权抖音您可：发布视频；同步抖音号信息；查看抖音号后台数据；实时监控抖音号投产；参与抖老板排行榜。'
        // const inReviews = ''
        return h(
          'div', [
            h('span', column.label),
            h('el-tooltip', {
              props: {
                placement: 'top',
                effect: "dark"
              }
            }, [
              h('div', {
                slot: 'content',
                style: {
                  'width': '250px',
                  whiteSpace: 'normal',

                }
              }, inReview),

              h('i', {
                class: 'el-icon-question',
                style: 'margin-left:5px;'
              })
            ],)
          ]
        )
      },
      baiyingAuth(h, {column}){
        const inReview = '授权后您可：获取小店订单，数据更精准及时；登录多账号管理系统，查看直播数据；添加商品到抖音橱窗；管理抖音直播间商品。'
        // const inReviews = ''
        return h(
          'div', [
            h('span', column.label),
            h('el-tooltip', {
              props: {
                placement: 'top',
                effect: "dark"
              }
            }, [
              h('div', {
                slot: 'content',
                style: {
                  'width': '250px',
                  whiteSpace: 'normal',

                }
              }, inReview),

              h('i', {
                class: 'el-icon-question',
                style: 'margin-left:5px;'
              })
            ],)
          ]
        )
      },
      dou(h, {column}){
        const inReview = '开启后，可监控该账号的Dou+投放订单'
        // const inReviews = ''
        return h(
          'div', [
            h('span', column.label),
            h('el-tooltip', {
              props: {
                placement: 'top',
                effect: "dark"
              }
            }, [
              h('div', {
                slot: 'content',
                style: {
                  'width': '250px',
                  whiteSpace: 'normal',

                }
              }, inReview),

              h('i', {
                class: 'el-icon-question',
                style: 'margin-left:5px;'
              })
            ],)
          ]
        )
      },
      shopOrder(h, {column}){
        const inReview = '1.开启后将自动为您采集精选联盟订单数据；2.未授权巨量百应无法开启开关。'
        // const inReviews = ''
        return h(
          'div', [
            h('span', column.label),
            h('el-tooltip', {
              props: {
                placement: 'top',
                effect: "dark"
              }
            }, [
              h('div', {
                slot: 'content',
                style: {
                  'width': '250px',
                  whiteSpace: 'normal',

                }
              }, inReview),

              h('i', {
                class: 'el-icon-question',
                style: 'margin-left:5px;'
              })
            ],)
          ]
        )
      },
      live(h, {column}){
        const inReview = '开启后将为您自动监控该账号所有直播场次'
        // const inReviews = ''
        return h(
          'div', [
            h('span', column.label),
            h('el-tooltip', {
              props: {
                placement: 'top',
                effect: "dark"
              }
            }, [
              h('div', {
                slot: 'content',
                style: {
                  'width': '250px',
                  whiteSpace: 'normal',

                }
              }, inReview),

              h('i', {
                class: 'el-icon-question',
                style: 'margin-left:5px;'
              })
            ],)
          ]
        )
      },
    }
  }
</script>

<style>

</style>
